<template>
	<view class="total">
		<image class="accreditBg piece4V2S1Img" src="/static/promotionActivitybgc.jpg"></image>
		<view class="hongbao1">成功推荐使用{{pData.ruleNumber|| 1}}位可赚</view>
		<view class="hongbao2">{{pData.amount }}</view>
		<view class="hongbao3" @click="qrCodeFn">推荐小哥换电</view>
		<!-- 如何获取80元 -->
		<view class="piece1">
			<view class="piece1Title" @click="gonglueFn">
				<span class="piece1TitleS1">如何获取{{pData.amount }}元</span>
				<span class="piece1TitleS2"><span>查看攻略</span><span>></span></span>
			</view>
			<view class="piece1Middle">
				<view class="piece1MiddleZou">
					<view class="piece1MiddleZouTop">必得</view>
					<view class="piece1MiddleZouMiddle">{{pData.amount }}元</view>
					<view class="piece1MiddleZouFooter">好友30天内成功换电</view>
				</view>
				<view class="piece1MiddleYou">
					<view class="piece1MiddleYouBgc">暂未开放</view>
					<view class="piece1MiddleYouTop">必得</view>
					<view class="piece1MiddleYouTop1">限时7天</view>
					<view class="piece1MiddleYouMiddle">30元</view>
					<view class="piece1MiddleYouFooter">好友再邀请一个用户</view>
				</view>
			</view>
		</view>
		<!-- 红包以下的内容，当是推广员时就显示 -->
		<view class="">
			<!-- 邀请好友规则 -->
			<view class="piece2">
				<view class="piece2Title">
					<span class="piece2TitleS1">邀请好友规则</span>
				</view>
				<view class="piece2Footer">
					<view class="piece2FooterV1"><span class="piece2FooterVS">01</span> 好友通过“邀请码”邀请</view>
					<view class="piece2FooterV2"><span class="piece2FooterVS">02</span> 接收邀请注册及认证</view>
					<view class="piece2FooterV3"><span class="piece2FooterVS">03</span> 在规定时间成功下单租电</view>
					<view class="piece2FooterV4"><span class="piece2FooterVS">04</span> 获得该有的奖励</view>
				</view>
			</view>
			<!-- 我的好友 -->
			<view class="piece3" @click="earningsFn">
				<view class="piece3Title">
					<span class="piece3TitleS1">我的好友</span>
					<span class="piece3TitleS2"><span>查看详情</span><span>></span></span>
				</view>
				<view class="piece3Middle">
					<view class="piece3Middle1">
						<view class="piece3Middle1V1">{{pData.count || 0}}</view>
						<view class="piece3Middle1V2">邀请好友(人)</view>
					</view>
					<view class="piece3Middle2">
						<view class="piece3Middle2V1">{{pData.yesterdayAmount|| 0}}</view>
						<view class="piece3Middle2V2">昨日收益(元)</view>
					</view>
					<view class="piece3Middle3">
						<view class="piece3Middle3V1">{{pData.theWayAmount|| 0}}</view>
						<view class="piece3Middle3V2">在途收益(元)</view>
					</view>
				</view>
			</view>
			<!-- 面对面邀请 -->
			<view class="piece4">
				<view class="piece4V1">
					<view class="piece4V2" @click="qrCodeFn">
						<view class="piece4V2S1">
							<image class="piece4V2S1Img" src="/static/t1.png"></image>
						</view>
						<view class="piece4V2S2">面对面邀请</view>
					</view>
					<view style="position: relative;top: -10px;">
						<button class="piece4V3" open-type="share">
							<view class="piece4V3S1">
								<image class="piece4V3S1Img" src="/static/t2.png"></image>
							</view>
							<view class="piece4V3S2">微信好友</view>
						</button>
					</view>

					<view class="piece4V4" @click="benefitFn">
						<view class="piece4V4S1">
							<image class="piece4V4S1Img" src="/static/t3.png"></image>
						</view>
						<view class="piece4V4S2">我要让利</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		promotionPromotionRecord,
		promotionGetInfo,
		promotionGetInfos,
	} from '@/api/user.js'
	import {
		HOST
	} from '@/config';
	export default {
		data() {
			return {
				// 在平台设置了A级推广员  start
				showTime: false,
				showss: false,
				loadList: [],
				loadLists: {},
				// 在平台设置了A级推广员  end
				appId: '',
				titless: '',
				promotionId: '',
				pData: {},
				qrCodes: '',
			}
		},
		onShow() {
			this.promotionId = uni.getStorageSync('PromotionId') || ''
			this.promotionGetInfosFn()
			// this.loadData()
			this.appId = uni.getAccountInfoSync().miniProgram.appId //获取小程序的appid
			console.log('333', this.appId);
			if (this.appId == '2021003194658130') {
				this.titless = '云禾换电'
			} else if (this.appId == '2021004106695849') {
				this.titless = '浩琪换电'
			} else if (this.appId == '2021004101645796') {
				this.titless = '小智换电'
			} else if (this.appId == '2021004123630128') {
				this.titless = '小熊唤电'
			} else if (this.appId == '2021004131634257') {
				this.titless = '领跑换电'
			} else {
				this.titless = '智能换电'
			}
		},
		methods: {
			// 我要让利
			benefitFn() {
				this.toast(`该功能暂未开放，敬请期待...`)
			},
			// 面对面邀请
			qrCodeFn() {
				this.routerLink({
					path: '/pages/user/promotion/qrCode',
				})
			},
			// 我的好友
			earningsFn() {
				this.routerLink({
					path: '/pages/user/promotion/AFriendMoney',
					query: {
						consumeCount: this.pData.count || 0, //已邀请成功的人数
						countAmount: this.pData.countAmount || 0, //总收益
						withdrawalAmount: this.pData.withdrawalAmount || 0, //已提现的收益
						promotionId: this.promotionId, //推广人员id
					}
				})
			},
			// 查看攻略
			gonglueFn() {
				console.log('222');
				this.toast(`成功推荐${this.pData.ruleNumber}位好友换电，必得${this.pData.amount}元`)
			},

			// 获取了推广员信息
			async promotionGetInfosFn() {
				const fo = await promotionGetInfos()
				this.pData = fo.data || {}
				this.qrCodes = HOST + this.pData.qrCode
			},
			// 邀请好友
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log('来自页面内分享按钮', res.target)
				}
				return {
					title: this.titless + '智能换电柜', //分享的名称
					path: `/pages/main/mine?promotionId=${this.promotionId}`,
					mpId: this.appId //此处配置微信小程序的AppId
				}
			},


			// 在平台设置了A级推广员  start
			async loadData() {
				// 推广员信息
				const ress = await promotionGetInfo(this.promotionId)
				this.loadLists = ress.data || {}
				if (this.loadLists) {
					this.loadLists.qrCode = HOST + this.loadLists.qrCode
				} else {
					this.loadLists.qrCode = ''
				}
				console.log('12342123', this.loadLists, this.loadLists.qrCode);
				// 推广记录
				this.showss = true
				const res = await promotionPromotionRecord({
					promotionId: this.promotionId,
					pageNum: 1,
					pageSize: 100,
				})
				this.showTime = true
				this.loadList = res.rows || []
				this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'
			},
			// 在平台设置了A级推广员  end
		}
	}
</script>

<style lang="scss" scoped>
	// 在平台设置了B级推广员  start
	.total {
		width: 100%;
		min-height: 150vh;
		height: auto;
	}

	.accreditBg {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		min-height: 150vh;
		// z-index: -5;
	}

	.hongbao1 {
		position: absolute;
		top: 29%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 36upx;
		font-weight: 700;
	}

	.hongbao2 {
		position: absolute;
		top: 39%;
		left: 48%;
		transform: translate(-50%, -50%);
		font-size: 150upx;
		font-weight: 400;
		color: #ee1e2c;
	}

	.hongbao3 {
		position: absolute;
		top: 59.5%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 42upx;
		font-weight: 700;
		color: #e12830;
	}

	.piece1 {
		position: absolute;
		top: 79.5%;
		left: 50%;
		width: 90%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

		.piece1Title {
			display: flex;
			justify-content: flex-end;

			.piece1TitleS1 {
				text-align: center;
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0%);
				font-size: 36upx;
				font-weight: 700;
				color: #000;
			}

			.piece1TitleS2 {
				text-align: center;
				position: absolute;
				right: 5%;
				transform: translate(0%, 60%);
				font-size: 23upx;
				font-weight: 700;
				color: #999;
			}

		}

		.piece1Middle {
			display: flex;
			justify-content: space-around;
			margin-top: 10%;
			margin-bottom: 5%;


			.piece1MiddleZou {
				background-color: #fadbc9;
				width: 40%;
				border-radius: 12px 0 0 0;
				overflow: hidden;

				.piece1MiddleZouTop {
					background-color: #ff423d;
					width: 36%;
					font-size: 26upx;
					color: #fff5da;
					padding: 10upx;
					border-radius: 24upx 0 24upx 0;
				}

				.piece1MiddleZouMiddle {
					font-size: 46upx;
					color: #ff3838;
					margin-left: 43%;
					padding-bottom: 7%;
				}

				.piece1MiddleZouFooter {
					font-size: 25upx;
					color: #645447;
					border-top: 1px dashed #999;
					text-align: center;
					padding-bottom: 7%;
					padding-top: 7%;
				}
			}

			.piece1MiddleYou {
				background-color: #fadbc9;
				width: 40%;
				border-radius: 12px 0 0 0;
				overflow: hidden;
				position: relative;

				.piece1MiddleYouBgc {
					width: 100%;
					height: 100%;
					position: absolute;
					background-color: rgba(0, 0, 0, 0.4);
					border-radius: 12px 0 0 0;
					font-size: 46upx;
					line-height: 400%;
					color: #fff;
					text-align: center;

				}

				.piece1MiddleYouTop {
					background-color: #ff423d;
					width: 36%;
					font-size: 26upx;
					color: #fff5da;
					padding: 10upx;
					border-radius: 24upx 0 24upx 0;
				}

				.piece1MiddleYouTop1 {
					font-size: 26upx;
					color: #645447;
					float: left;
				}

				.piece1MiddleYouMiddle {
					font-size: 46upx;
					color: #ff3838;
					margin-left: 43%;
					padding-bottom: 7%;
				}

				.piece1MiddleYouFooter {
					font-size: 25upx;
					color: #645447;
					border-top: 1px dashed #999;
					text-align: center;
					padding-bottom: 7%;
					padding-top: 7%;
				}
			}
		}
	}


	.piece2 {
		position: absolute;
		top: 104%;
		left: 50%;
		width: 90%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

		.piece2Title {
			text-align: center;

			.piece2TitleS1 {
				text-align: center;
				font-size: 36upx;
				font-weight: 700;
				color: #000;
			}
		}

		.piece2Footer {
			padding-left: 11%;
			padding-top: 4%;
			padding-bottom: 4%;
			font-weight: 530;

			.piece2FooterV1,
			.piece2FooterV2,
			.piece2FooterV3,
			.piece2FooterV4 {
				padding-bottom: 1.5%;
			}

			.piece2FooterVS {
				margin-right: 4%;
				font-size: 24upx;
				display: inline-block;
				background-color: #ee4f39;
				text-align: center;
				border-radius: 50%;
				padding: 1.5%;
				color: #fff;
			}
		}

	}

	.piece3 {
		position: absolute;
		top: 127%;
		left: 50%;
		width: 90%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

		.piece3Title {
			display: flex;
			justify-content: flex-end;

			.piece3TitleS1 {
				text-align: center;
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0%);
				font-size: 36upx;
				font-weight: 700;
				color: #000;
			}

			.piece3TitleS2 {
				text-align: center;
				position: absolute;
				right: 5%;
				transform: translate(0%, 60%);
				font-size: 23upx;
				font-weight: 700;
				color: #999;
			}

		}

		.piece3Middle {
			display: flex;
			justify-content: space-around;
			margin-top: 12%;
			margin-bottom: 5%;
			background-color: #eeeeee;
			padding: 4%;
			margin-left: 20upx;
			margin-right: 20upx;

			.piece3Middle1 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.piece3Middle1V1 {
					font-size: 40upx;
					font-weight: 700;
					margin-bottom: 5%;
				}

				.piece3Middle1V2 {
					font-size: 25upx;
					color: #999;
				}
			}

			.piece3Middle2 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.piece3Middle2V1 {
					font-size: 40upx;
					font-weight: 700;
					margin-bottom: 5%;
				}

				.piece3Middle2V2 {
					font-size: 25upx;
					color: #999;
				}
			}

			.piece3Middle3 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.piece3Middle3V1 {
					font-size: 40upx;
					font-weight: 700;
					margin-bottom: 5%;
				}

				.piece3Middle3V2 {
					font-size: 25upx;
					color: #999;
				}
			}
		}
	}

	.piece4 {
		position: absolute;
		top: 146%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

		.piece4V1 {
			padding: 2.5%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 1.5%;
			margin-top: 1%;

			.piece4V2 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.piece4V2S1 {
					width: 80%;
					height: 100upx;
					margin-bottom: 17upx;

					.piece4V2S1Img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.piece4V3 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.piece4V3S1 {
					width: 80%;
					height: 100upx;
					margin-bottom: 17upx;

					.piece4V3S1Img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.piece4V4 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.piece4V4S1 {
					width: 80%;
					height: 100upx;
					margin-bottom: 17upx;

					.piece4V4S1Img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>